<template>
    <header>
        <div class="Gwidth">
            <div class="logo">
                <nuxt-link :to="{name:'index'}">
                    <img src="~/static/image/logo.png" alt="一起家具网">
                </nuxt-link>
            </div>
            <div class="center">
                <nav>
                    <ul>
                        <li>
                            <nuxt-link :to="{name:'index'}">首页</nuxt-link>
                        </li>
                    </ul>
                </nav>
                <div class="search" v-show="search_show">
                    <AutoComplete v-model="keyword" placeholder="请输入品牌、厂家" @on-blur="onEnter">
                        <div class="search_cont">
                            <h4>热门搜索</h4>
                            <div class="key_list">
                                <div class="search_item" v-for="(item,index) in recommend_list" :key="index" @click="recomClick(item.brand_name)">
                                    <span>{{index+1}}</span>
                                    <p>{{item.brand_name}}</p>
                                </div>
                                
                            </div>
                        </div>
                    </AutoComplete>
                    <Button class="submit" @click="search">搜索</Button>
                </div>
            </div>
            <div class="right">
                <div class="address" @click="addressClick">
                    <div class="ico"></div>
                    <div class="city">{{address.name}}</div>
                    <div class="more"></div>
                </div>
                <div class="login">
                    <div v-show="!userInfo.user_id" class="item" @click="isLogin = !isLogin">登录</div>
                    <div v-show="!userInfo.user_id" class="registered" @click="isLogin = !isLogin">注册</div>
                    <div v-show="userInfo.user_id" class="registered">{{userInfo.date_str}}</div>
                </div>
                <div class="more" @click="moreClick">更多</div>
            </div>
            <!-- 选择地址弹窗 -->
            <div class="address_popup" v-show="address_show">
                <ul class="address_nav">
                    <li 
                    :class="{active:addNavIndex==index}"
                    @click="addNavClick(index)"
                    v-for="(item,index) in address_list" :key="index"
                    >
                        {{item.initials}}
                    </li>
                </ul>
                <div class="address_cont" @scroll="on_Scroll">
                    <div class="current_location">
                        <span>当前城市定位：</span><span>{{locationAddress}}</span>
                    </div>
                    <div class="address_title" v-for="(item,index) in address_list" :key="index">
                        <h1>{{item.initials}}</h1>
                        <div class="hot cont">
                            <div 
                            class="item Noselect" 
                            v-for="address in item.list" 
                            :key="address.city_id"
                            @click="ChangeAddress(address)"
                            >{{address.name}}</div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="popup" @click="address_show=false" v-show="address_show"></div>
            <!-- 更多弹窗 -->
            <ul class="more_popup" v-show="more_show">
                <!-- <li class="Noselect">移动端app</li> -->
                <li class="Noselect" @click="ToPage('/business/applets')">微信小程序</li>
                <li class="Noselect" @click="ToPage('/business/download')">商家版app</li>
                <li class="Noselect" @click="ToPage('/business/login')">商家后台</li>
            </ul>
        </div>
        <!-- 登录弹窗 -->
        <Login :is_show="isLogin" @onClose="onCloseLogin"/>
    </header>
</template>
<script>
import Login from "~/components/Login.vue";
import {mapState,mapMutations} from 'vuex'
export default {
    components:{
        Login
    },
    props: {
        search_show:{
			type:Boolean,
			default:true
		}
    },
    data(){
        return{
            isLogin:false,//登录弹窗
            keyword:'',
            address_show:false,//是否现实选择地址弹窗
            more_show:false,//是否现实更多弹窗
            addNavIndex:0,
            address_list:[],
            recommend_list:[],//推荐列表
        }
    },
    created(){
        this.location()
        this.addressStore()
        this.recommendStoreList()
    },
    computed:{
		...mapState(['address','locationAddress','userInfo'])
	},
    mounted(){
        // document.addEventListener('scroll',this.on_Scroll,true)
        this.getLocation()
        // try {
        //     this.$store.commit('ChangeUserInfo',JSON.parse(localStorage.getItem('userInfo')));
        // } catch (error) {
        //     this.$store.commit('ChangeUserInfo',{});
        // }
        
    },
    methods:{
        onEnter(){
            console.log('end')
        },
        // 搜索
        search(){
            if (!this.keyword) {
                this.$Message.error('请输入搜索内容');
                return
            }
            this.$router.push({path:'/search',query:{keyword:this.keyword}})
        },
        recomClick(e){
            this.keyword = e
            this.search()
        },
        //推荐
		async recommendStoreList(){
			let{data:{code,data}} = await this.$http.post(this.$API.getIndexRecommendStoreList,{})
			if (code==200) {
                this.$emit('getRecomm',data.data)
				this.recommend_list = data.data
			}
		},
        // 地址列表
        async addressStore(){
            let{data:{code,data}} = await this.$http.post(this.$API.addressStore,{})
            if (code==200) {
                let tempArr = [], newArr = []
                for (let i = 0; i < data.data.length; i++) {
                    if (tempArr.indexOf(data.data[i].initials) === -1) {
                        newArr.push({
                            initials: data.data[i].initials,
                            list: [data.data[i].data]
                        })
                        tempArr.push(data.data[i].initials);
                    } else {
                        for (let j = 0; j < newArr.length; j++) {
                            if (newArr[j].initials == data.data[i].initials) {
                                newArr[j].list.push(data.data[i].data)
                            }
                        }
                    }
                }
                for (let i = 0; i < newArr.length; i++) {
                    for (let y = 0; y < newArr.length; y++) {
                        if (newArr[i].initials!='热门') {
                            if (newArr[i].initials<newArr[y].initials) {
                                let item = newArr[y]
                                newArr[y] = newArr[i]
                                newArr[i] = item
                            }
                        }   
                    }
                    
                }
                this.address_list = newArr
                // console.log('newArr----------------------------',newArr)
            }
        },
        // 选择地址
        ChangeAddress(e){
            console.log(e)
            this.$store.commit('ChangeAddress',e);
            this.address_show = false
        },
        // 打开更多弹窗
        moreClick(){
            this.more_show = !this.more_show
            this.address_show = false
        },
        // 打开选择地址弹窗
        addressClick(){
            this.address_show = !this.address_show
            this.more_show = false
        },
        //切换地址
        addNavClick(e){
            this.addNavIndex = e
            var items = document.querySelectorAll(".address_title");
            for (var i = 0; i < items.length; i++) {
                if (e === i) {
                    items[i].parentNode.scrollTop = items[i].offsetTop;
                    // items[i].scrollIntoView({
                    //     block: "start",//默认跳转到顶部
                    //     behavior: "smooth"//滚动的速度
                    // });
                }
            }
        },
        on_Scroll(e) {
            let scrollItems = document.querySelectorAll(".address_title");
            for (let i = scrollItems.length - 1; i >= 0; i--) {
                // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
                let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop + 58;
                if (judge) {
                    this.addNavIndex = i;
                    break;
                }
            }
        },
        // 跳转
        ToPage(url,data){
            this.$router.push({path:url})
        },
        onCloseLogin(){
            this.isLogin = false
        },
        // 获取当前位置
        async location(){
			let BMap = await this.$location()
            console.log('BMap--------------------------',BMap)
			var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(a=>{
                console.log('当前位置--------------',a)
                if (this.address.name == '定位中') {
                    this.address_list.forEach(item => {
                        for (let i = 0; i < item.list.length; i++) {
                            if(item.list[i].name.indexOf(a.address.city)!=-1){
                                this.$store.commit('ChangeAddress',item.list[i]);
                            }
                        }
                    });
                }
                console.log('address>>>>>>>>>>>>>>>>>',this.address)
                this.$store.commit('ChangeLocation',a.address.city);
            })
			
		},
        getLocation(){
            let that = this;
            var map = new AMap.Map('container', {
                resizeEnable: true 
            });
            AMap.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：5s
                    buttonPosition:'RB',    //定位按钮的停靠位置
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                });
                geolocation.getCurrentPosition(function(status,result){
                    if(status=='complete'){
                        console.log('高德地图-----------------',result)
                    }else{
                        console.log('高德地图-----------------',result)
                    }
                });
            });
        },
        //解析定位结果
        onComplete(data) {
        
        },
        //解析定位错误信息
        onError(data) {
            console.log("定位失败:"+data.message);
        },
    }
}
</script>
<style scoped>
    header{
        height: 72px;
        background: #1A1A1A;
        display: flex;
        align-items: center;
        position: sticky;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    header .Gwidth{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 0;
    }
    header .logo a{
        display: inline-block;
    }
    header .logo img{
        width: 182px;
        height: 33px;
    }
    header .center,header .right{
        display: flex;
        align-items: center;
    }
    header nav li a{
        font-size: 22px;
        font-weight: 400;
        color: #FFFFFF;
    }
    header .search{
        display: flex;
        align-items: center;
        margin-left: 40px;
        width: 330px;
    }
    header .search .keyword{
        width: 266px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 0 0 4px;
        
    }
    header .search .keyword input{
        width: 100%;
        height: 100%;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 40px;
        border-radius: 4px 0 0 4px;
    }
    header .search>>>.ivu-input,header .search>>>.ivu-select-dropdown{
        border-radius: 4px 0 0 4px;
    }
    header .search>>>.ivu-select-dropdown{
        width: 330px;
        margin-top: 0;
        
    }
    header .search .submit{
        width: 64px;
        height: 32px;
        background: #F30213;
        border-radius: 0px 4px 4px 0px;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        border: 0;
    }
    header .search_cont{
        padding: 13px 10px;
    }
    .search_cont .key_list .search_item:nth-child(1) span{
        background: #f30213;
    }
    .search_cont .key_list .search_item:nth-child(2) span{
        background: #ff7d37;
    }
    .search_cont .key_list .search_item:nth-child(3) span{
        background: #ffb821;
    }
    .search_cont .search_item{
        margin-top: 12px;
        display: flex;
        align-items: center;
    }
    .search_cont .search_item span{
        display: inline-block;
        width: 23px;
        height: 23px;
        background: #999999;
        border-radius: 4px;
        text-align: center;
        line-height: 23px;
        font-size: 12px;
        font-weight: bold;
        color: #FFFEFE;
        margin-right: 10px;
    }
    .search_cont .search_item p{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        width: calc(100% - 35px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }
    header .address{
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    header .address .ico{
        width: 15px;
        height: 19px;
        background:url(~/static/image/ico/address.png)center center no-repeat;
        background-size: 15px 19px;
        margin-right: 6px;
    }
    header .address .city{
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40px;
        margin-right: 6px;
    }
    header .address .more{
        width: 14px;
        height: 8px;
        background:url(~/static/image/ico/down.png)center center no-repeat;
        background-size: 14px 8px;
        margin-left: 0;
    }
    header .login{
        display: flex;
        align-items: center;
        margin-left: 20px;
    }
    header .login div{
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 16px;
        cursor: pointer;
    }
    header .login .item{
        border-right: 1px solid #ffffff;
        padding-right: 10px;
    }
    header .login .registered{
        padding-left: 10px;
    }
    .more{
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40px;
        background:url(~/static/image/ico/down.png)right center no-repeat;
        padding-right: 20px;
        background-size: 12px 8px;
        margin-left: 28px;
        cursor: pointer;
    }
    /* 更多弹窗 */
    .more_popup{
        width: 160px;
        /* height: 150px; */
        background: #FFFFFF;
        border: 1px solid #E6E6E6;
        box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.16);
        border-radius: 6px;
        padding: 15px 20px;
        position: absolute;
        right: 0;
        top:58px;
        z-index: 10;
    }
    .more_popup li{
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;
        cursor: pointer;
    }
    /* 地址弹窗 */
    .popup{
        min-width:100vw;
        min-height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2;
    }
    .address_popup{
        width: 422px;
        height: 368px;
        background: #FFFFFF;
        border: 1px solid #E6E6E6;
        box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.16);
        border-radius: 6px;
        position: absolute;
        right: 0;
        top:58px;
        z-index: 10;
        display: flex;
        justify-content: center;
    }
    .address_popup .address_nav{
        width: 70px;
        height: 368px;
        background: #FFFFFF;
        border: 1px solid #E6E6E6;
        border-radius: 6px 0px 0px 6px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding-left: 6px;
    }
    .address_popup .address_nav li{
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        text-align: center;
        line-height: 22px;
        cursor: pointer;
        margin-top: 4px;
        overflow: hidden;
    }
    .address_popup .address_nav li.active{
        background-color: #F30213;
        color: #FFFFFF;
    }
    .address_popup .address_cont{
        width: calc(100% - 70px);
        height: 100%;
        overflow-y: auto;
    }
    .address_popup .address_cont .current_location{
        padding: 13px 23px;
    }
    .address_popup .address_cont .current_location span{
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 32px;
    }
    .address_popup .address_cont .current_location span:nth-child(2){
        color: #F30213;
    }
    .address_popup .address_cont .address_title h1{
        line-height: 29px;
        height: 29px;
        background: #F8F8F8;
        padding-left: 23px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 29px;
    }
    .address_popup .address_cont .cont{
        padding:0 23px;
        padding-bottom: 16px;
        background-color: #ffffff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

    }
    .address_popup .address_cont .cont .item{
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
        margin-top: 16px;
        min-width: calc(25% - 15px);
        margin-right: 20px;
    }
    .address_popup .address_cont .cont .item:nth-child(4n){
        margin-right: 0;
    }
</style>
